<template>
  <a-radio-group
    :value="modelValue"
    name="radioGroup"
    @change="handleChange"
  >
    <a-radio
      v-for="option in options"
      :key="option.value"
      :value="option.value"
      >{{ option.label }}</a-radio
    >
  </a-radio-group>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { SelectProps } from "ant-design-vue/es/select";

interface Item {
  options?: SelectProps["options"];
  placeholder?: string;
  dictCode?:string | number;
}

interface Option {
  label: string;
  value: string | number;
}

//接收属性和事件
const props = defineProps<{
  item: Item;
  modelValue: any;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string | number | string[] | number[]): void;
}>();

const selectedValue = ref(props.modelValue);

watch(
  () => props.modelValue,
  (value) => {
    selectedValue.value = value;
  }
);

const options = ref<Option[]>([]);

watch(
  () => props.item.dictCode,
  (newVal) => {
    if (newVal && (!props.item.options || props.item.options.length === 0)) {
      //根据字典码调用字典接口
      options.value = [
        {
          label: "字典项1",
          value: "1",
        },
        {
          label: "字典项2",
          value: "2",
        },
      ];
    } else {
      options.value = (props.item.options || []).map((opt) => ({
        label: opt.label,
        value: opt.value,
      })) as Option[];
    }
  },{
    immediate: true
  }
);

// 处理选中值变化
const handleChange = (e: Event) => {
  const target = e.target as HTMLInputElement;
  if (target && 'value' in target) {
    const value = target.value;
    emit("update:modelValue", value);
  }
};
</script>

<style scoped></style>
